﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <#include "../comm/header.ftl"/>
    <link href="${req.contextPath}/lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
    <#--<script src="${req.contextPath}/ligerUIlib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>-->
    <script src="${req.contextPath}/lib/jquery-validation/jquery.validate.min.js"></script>
    <script src="${req.contextPath}/lib/jquery-validation/jquery.metadata.js"></script>
    <script src="${req.contextPath}/lib/jquery-validation/messages_cn.js"></script>
    <script src="${req.contextPath}/js/plugins/jquery-form/jquery.form.js"></script>
    <script>
        var grid = null;//表格对象
        var form = null;
        $(function () {
            //grid
            grid = $("#department_msg").ligerGrid({
                height: '100%',
                heightDiff: -5,
                root:'list',
                record:'total',
                dataAction: 'local',
                url: '/department/getDepartmentData.do',
                checkbox:true,
                rownumbers:true,
                columns: [
                    {display: 'id', name: 'id',hide:true},
                    {display: '部门名称', name: 'name'},
                    {display: '部门编号', name: 'sn'},
                    {display: '部门描述', name: 'remark'}
                ],
                toolbar: {
                    items: [
                        { text: '增加', click: addDepartment, icon: 'add' },
                        { line: true },
                        { text: '修改', click: editDepartment, icon: 'modify' },
                        { line: true },
                        { text: '删除', click: deleteDepartment, img: '${req.contextPath}/lib/ligerUI/skins/icons/delete.gif' }
                    ]
                }
            });
            //表单
            form = $("#editForm").ligerForm({
                validate: true
            });

        });


        function addDepartment() {
            //清除窗口信息
            $("#editForm")[0].reset();
            $("#txtRemark").html("");
            openWindow();
        }

        function editDepartment() {
            var rows = grid.getSelectedRows();
            if(rows == null || rows == "undefined" || rows.length == 0){
                $.ligerDialog.warn("请选择要修改的信息");
            }else if(rows.length > 1){
                $.ligerDialog.warn("不支持批量修改");
            }else{
                //回显选部门信息
                $("#txtId").val(rows[0].id);
                $("#txtName").val(rows[0].name);
                $("#txtSn").val(rows[0].sn);
                $("#txtRemark").html(rows[0].remark);
                openWindow();
            }

        }

        function deleteDepartment() {
            var rows = grid.getSelectedRows();
            if(rows == null || rows == "undefined" || rows.length == 0){
                $.ligerDialog.warn("请选择要删除的数据");
            }else{
                $.ligerDialog.confirm('确定要删除选中的数据吗？删除后不可恢复', function (yes) {
                    if(yes){
                        //注意着条语句用来处理数组的中括号问题的，不然会导致后台接收数组为空；
                        $.ajaxSettings.traditional=true;
                        var ids = [];
                        $.each(rows,function (index, value) {
                            ids[index] = value.id;
                        });
                        $.post("/department/deleteDepartment.do",{ids:ids},function (result) {
                            if(result.success){
                                $.ligerDialog.success("删除成功","提示",function () {
                                    window.location.reload();
                                })
                            }else {
                                $.ligerDialog.error(result.msg);
                            }
                        });
                    }
                });
            }
        }

        //打开窗口
        function openWindow() {
            $.ligerDialog.open({
                title:'编辑部门信息',
                target: $("#add_dialog") ,
                height: 350,
                width: 500,
                showMax:true,   //是否显示最大化按钮
                showToggle: true,   //是否显示收缩窗口按钮
                showMin: true,  //是否显示最小化按钮
                isResize: true, // 是否调整大小
                buttons: [
                    {
                        text: '确定',
                        cls:'l-dialog-btn-highlight',
                        onclick: function (item, dialog) {
                            if($("#editForm").valid()){
                                $("#editForm").ajaxSubmit(function (result) {
                                    if(result.success){
                                        $.ligerDialog.success("保存成功","提示",function () {
                                            window.location.reload();
                                        })
                                    }else {
                                        $.ligerDialog.error(result.msg,"错误");
                                    }
                                });
                            }
                        }
                    }
                ]
            });
        }


    </script>
</head>
<body style="overflow-x:hidden; padding:2px;">
    <#--可以写一些表头的内容-->
    <div id="department_msg">
        <#--这里是数据表格-->
    </div>

    <#--这里是弹窗-->
    <div style="display: none">

        <style type="text/css">
            .l-table-edit-td{ padding:4px;}
        </style>
        <div id="add_dialog">
            <form id="editForm" action="${req.contextPath}/department/saveOrUpdate.do" method="post">
                <input type="hidden" name="Id" id="txtId">
                <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                    <tr>
                        <td align="right" class="l-table-edit-td">部门名称:</td>
                        <td align="left" class="l-table-edit-td"><input name="name" type="text" id="txtName" ltype="text" validate="{required:true}" /></td>
                        <td align="left"></td>
                    </tr>

                    <tr>
                        <td align="right" class="l-table-edit-td">部门编号:</td>
                        <td align="left" class="l-table-edit-td"><input name="sn" type="text" id="txtSn" ltype="text" validate="{required:true}" /></td>
                        <td align="left"></td>
                    </tr>

                    <tr>
                        <td align="right" class="l-table-edit-td">部门描述:</td>
                        <td align="left" class="l-table-edit-td">
                            <textarea cols="100" rows="6" class="l-textarea" name="remark" id="txtRemark" style="width:300px" ></textarea>
                        </td><td align="left"></td>
                    </tr>
                </table>
            </form>

        </div>

    </div>
</body>
</html>